﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>权限管理</title>
    <link href="../../../static/css/layout.css" rel="stylesheet" type="text/css" />
    <link href="../../../static/css/cb.css" rel="stylesheet" type="text/css" />
    <link href="../../../static/css/n.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css"
          href="../../../static/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css"
          href="../../../static/easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css"
          href="../../../static/easyui/demo/demo.css" />
    <script type="text/javascript" src="../../../static/easyui/jquery.min.js"></script>
    <script type="text/javascript"
            src="../../../static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../static/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="../../../static/js/laypage/laypage.js"></script>
    <link rel="stylesheet" href="../../../static/js/ztree/demo.css" type="text/css">
    <link rel="stylesheet"
          href="../../../static/js/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript"
            src="../../../static/js/ztree/jquery.ztree.core.min.js"></script>
    <script type="text/javascript"
            src="../../../static/js/ztree/jquery.ztree.excheck.min.js"></script>
</head>
<body>
<table width="99%" border="0" align="center" cellpadding="0"
       cellspacing="0">
    <tr>
        <td width="1%" align="left" background="../../../static/images/b2.jpg"><img
                src="../../../static/images/b1.jpg" width="10" height="26" /></td>
        <td width="68%" background="../../../static/images/b2.jpg"><table
                width="124" border="0" align="left" cellpadding="0" cellspacing="0">
            <tr>
                <td width="20" align="left"><img src="../../../static/images/tz.gif"
                                                 width="10" height="16" /></td>
                <td width="104" align="left" class="biao">查找角色信息</td>
            </tr>
        </table></td>
        <td width="31%" align="right" background="../../../static/images/b2.jpg"><img
                src="../../../static/images/b3.jpg" width="9" height="26" /></td>
    </tr>
</table>
<table width="99%" border="0" align="center" cellpadding="3"
       cellspacing="1" bgcolor="#AEDEF4" style="font-size: 10px">
    <tr>
        <td align="center" bgcolor="#E2F7FE">
            <form id="form1" name="form1">
                <table width="80%" border="0" cellspacing="1" cellpadding="3">
                    <tr>
                        <td width="10%" align="right">角色名称:</td>
                        <td width="10%" align="left"><input name="roleName"
                                                            type="text" id="roleName" size="15" /></td>
                        <td width="10%" align="left"><input type="button"
                                                            name="query" value="查找" onclick="queryEvent()" /></td>
                        <td width="10%" colspan="2" align="right">
                            <input type="button" onclick="addEvent()" name="add" value="增加记录"/>
                            <input type="button" name="export" value="导出Excel" onclick="exportAll()"/></td>
                        </td>
                        <td>
                            <input type="checkbox" id="selAll" onclick="doSelectAll()"/>全选
                            <input type="button" onclick="doDeleteAll()" name="checkboxAll" id="checkboxAll"  value="批量删除"/>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>

<table width="50%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="5"></td>
    </tr>
</table>
<table width="99%" border="0" align="center" cellpadding="0"
       cellspacing="0">
    <tr>
        <td width="1%" align="left" background="../../../static/images/b2.jpg"><img
                src="../../../static/images/b1.jpg" width="10" height="26" /></td>
        <td width="68%" background="../../../static/images/b2.jpg"><table
                width="124" border="0" align="left" cellpadding="0" cellspacing="0">
            <tr>
                <td width="20" align="left"><img src="../../../static/images/tz.gif"
                                                 width="10" height="16" /></td>
                <td width="104" align="left" class="biao">角色信息列表</td>
            </tr>
        </table></td>
        <td width="31%" align="right" background="../../../static/images/b2.jpg"><img
                src="../../../static/images/b3.jpg" width="9" height="26" /></td>
    </tr>
</table>


<table width="99%" border="0" align="center" cellpadding="3"
       cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4;font-size: 10px"
       id="app" >
    <tr>
        <td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
        <td align="center" bgcolor="#EFFBFE">角色名称</td>
        <td align="center" bgcolor="#EFFBFE">角色描述</td>
        <td align="center" bgcolor="#EFFBFE">创建时间</td>
        <td align="center" bgcolor="#EFFBFE">状态</td>
        <td align="center" bgcolor="#EFFBFE">操作类型</td>
    </tr>
    <tr onmouseout="this.style.backgroundColor='#ffffff'"
        bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'"
        v-for="(item,index) in result">

        <td height="25" align="center">

            <input name="selectedRow"  type="checkbox" :value="item.id" /></td>
        <td align="center" class="t5"><div align="center">
            <strong>{{item.roleName}}</strong>
        </div></td>
        <td align="center">{{item.roleDesc}}</td>
        <td align="center">{{new
            Date(item.createTime).toLocaleString()}}</td>
        <td align="center" v-if="item.status==1">启用</td>
        <td align="center" v-else>禁用</td>
        <td align="left">
            <div align="left" style="padding-left: 5px">
                <div align="center">
                    <input type="button" @click="checkEvent(item.id)" name=""
                           value="查看" /> <input type="button" @click="editEvent(item.id)"
                             name="" value="修改" /> <input type="button"
							@click="delEvent(item.id)" name="" value="删除" />
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td colspan="7" align="center">
            <div id="pagenav"></div>
        </td>
    </tr>
</table>
<!-- 增加用户弹出框 -->
<div id="dlg"></div>
<!-- 修改用户弹出框 -->
<div id="dlg1"></div>
<!-- 查看用户弹出框 -->
<div id="dlg2"></div>
</body>
<script type="text/javascript">


    //vuejs
    var app = new Vue({
        el : '#app',
        data : {
            result : []
        }
    });

    //全选、全反选
    function doSelectAll(){
        // jquery 1.6 前
        //$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked"));
        //prop jquery 1.6+建议使用
        $("input[name=selectedRow]").prop("checked", $("#selAll").is(":checked"));
    }


    /*
    * 批量删除*/
    function doDeleteAll(){
        obj = document.getElementsByName("selectedRow");
        check_val = [];
        for(k in obj){
            if(obj[k].checked)
                check_val.push(obj[k].value);
        }
        alert(check_val);
        $.messager.confirm('提示框', '你确定要删除吗?', function(res) {
            if (res) {
                //确认删除
                $.ajax({
                    url : "/sysrole/doDelRoleAll",
                    data : {
                        "selectedRow" : JSON.stringify(check_val)
                    },
                    type : "get",
                    datatype : "json",
                    success : function(result) {
                        $.messager.alert({
                            title : '消息',
                            msg : result.message,
                            icon : 'info'
                        });
                        getPageList();//更新分页
                    }
                });
            } else {
                //取消删除
            }
        });
    }

    //导出execle表格
    function exportAll(){
        var url = "/sysrole/exportExcel";
        window.open(url);
    }


    Vue.filter('moment', function(value, formatString) {
        formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
        return moment(value).format(formatString);
    });

    //查询角色数据
    var getPageList = function(curr) {
        $.ajax({
            type : "post",
            dataType : "json",
            url : "/sysrole/search",
            data : {
                "roleName" : $('#roleName').val(),
                "pageNum" : curr || 1,
                "pageSize" : 10
            },
            success : function(msg) {
                app.result = msg.data[0].list;
                laypage({
                    cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                    pages : msg.data[0].pages, //总页数
                    first : "首页",
                    last : "尾页",
                    skip : true, //是否开启跳页
                    skin : '#5675A2',
                    curr : curr || 1, //当前页
                    jump : function(obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            getPageList(obj.curr);
                        }
                    }
                });
            }
        });
    }

    //页面加载，查询角色
    getPageList();

    //模糊查询角色事件
    var queryEvent = function() {
        getPageList();
    }
    //增加角色事件
    var addEvent = function() {
        $('#dlg').dialog({
            type : 2,
            title : '角色管理-增加',
            width : 520,
            height : 580,
            closed : false,
            cache : false,
            href : '/sysrole/toAdd',
            modal : true,
            buttons : [ {
                text : '保存',
                iconCls : 'icon-ok',
                handler : function() {
                    $.ajax({
                        type : "POST",
                        dataType : "json",
                        url : "/sysrole/doAdd",
                        data : {
                            roleName : $('#roleName_add').val(),
                            roleDesc : $('#roleDesc_add').val(),
                            status : $('#status_add').val(),
                            strArr : JSON.stringify(nodess)
                        },
                        success : function(result) {
                            $.messager.alert({
                                title : '消息',
                                msg : result.message,
                                icon : 'info'
                            });
                            getPageList();
                            $('#dlg').dialog('close');
                        }
                    });
                }
            }, {
                text : '关闭',
                handler : function() {
                    $('#dlg').dialog('close');
                }
            } ]
        });
    }

    //修改角色
    var editEvent = function(id) {
        $('#dlg1').dialog({
            type : 2,
            title : '权限管理-修改',
            width : 520,
            height : 580,
            closed : false,
            cache : false,
            href : '/sysrole/toEdit?id=' + id,
            modal : true,
            buttons : [ {
                text : '保存',
                iconCls : 'icon-ok',
                handler : function() {
                    $.ajax({
                        type : "POST",
                        dataType : "json",
                        url : "/sysrole/doEdit",
                        data : {
                            id : $('#role_id').val(),
                            roleName : $('#roleName_edit').val(),
                            roleDesc : $('#roleDesc_edit').val(),
                            status : $('#status_edit').val(),
                            strArr : JSON.stringify(nodes)
                        },
                        success : function(result) {
                            $.messager.alert({
                                title : '消息',
                                msg : result.message,
                                icon : 'info'
                            });
                            getPageList();
                            $('#dlg1').dialog('close');
                        }
                    });
                }
            }, {
                text : '关闭',
                handler : function() {
                    $('#dlg1').dialog('close');
                }
            } ]
        });
    }

    //查看角色详情
    var checkEvent = function(id) {
        $('#dlg2').dialog({
            type : 2,
            title : '角色管理-授权',
            width : 520,
            height : 580,
            closed : false,
            cache : false,
            href : '/sysrole/detail?id=' + id,
            modal : true
        });
    }

    //删除角色
    var delEvent = function(id) {
        $.messager.confirm('提示框', '你确定要删除吗?', function(res) {
            if (res) {
                //确认删除
                $.ajax({
                    url : "/sysrole/doDel",
                    data : {
                        "id" : id
                    },
                    type : "get",
                    datatype : "json",
                    success : function(result) {
                        $.messager.alert({
                            title : '消息',
                            msg : result.message,
                            icon : 'info'
                        });
                        getPageList();//更新分页
                    }
                });
            } else {
                //取消删除
            }
        });
    }


</script>
</html>